<meta name="referrer" content="no-referrer" />
<template>
	<view>
		<view class="index-top">
			<view class="search">
				<input type="text" placeholder="输入帖子名关键字搜索" v-model="keyword" />
			</view>
		</view>
		<view v-if="isNull">
			<view class="content">
				<view class="comm" v-for="(stick,index) in result">
					<view @click="mainStick(stick.mid)">
						<!-- 用户部分 -->
						<view class="c-top">
							<image :src="httpPath+stick.uavatar"
								style="width: 100rpx;height: 100rpx;border-radius: 50%;">
							</image>
							<text>{{stick.uname}}</text>
							<!-- <image src="../../static/img/star.png"></image> -->
						</view>
						<!-- 内容部分 -->
						<view class="c-center">
							<!-- 文本内容 -->
							<view class="text_box">
								<text class="mtitle">{{stick.mtitle}}</text>
							</view>
							<!-- 图片内容 -->
							<text v-if="isImg" v-for="(p,index) in pictures" overflow>
								<image v-if="p.mid==stick.mid" :src="httpPath+p.pname" mode="aspectFill"></image>
							</text>
						</view>
					</view>
					<!-- 其他部分 -->
					<view class="c-botton flex">
						<view>
							<image src="../../static/icon/a-fenxiang2.png"></image>
							<text>分享</text>
						</view>
						<view>
							<image src="../../static/icon/xiaoxi-zhihui.png"></image>
							<text>{{stick.mreplies}}</text>
						</view>
						<view @click="addLike(stick.mlike,stick.mid)">
							<image :src="iconImg.like"></image>
							<text v-if="stick.mlike==0">点赞</text>
							<text v-if="stick.mlike!=0">{{stick.mlike}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isNull: false,
				isImg: false,

				keyword: "",
				sticks: [],
				pictures: [],
				httpPath: 'http://localhost',
				
				iconImg:{	//有几个没有使用
					like:"../../static/icon/like(1).png",
					like1:"../../static/icon/like(1).png",
					like2:"../../static/icon/like(2).png"
				}
			}
		},
		onPullDownRefresh() {
			console.log("下拉刷新");
			this.sticks = [ { }, { } ];
			this.getSticks();
		},
		onShow() {
			this.getSticks();
		},
		filters: {
			// rCount: function(val) {
			// 	return val==0?val:this.rNum
			// }
		},
		computed: {
			//按名字查询
			result: function() {
				return this.sticks.filter(s => {
					if(s.mtitle!=null){ //只是为了取消报错，H5端可以显示图片，但微信端不能（真离谱
						return s.mtitle.indexOf(this.keyword) > -1;
					}
				});
				console.log(this.isImg);
			}
		},
		methods: {
			//获取帖子文本、图片内容
			getSticks() {
				uni.request({
					url: 'http://localhost/stick/getSticks',
					method: 'POST',
					success: data => {
						uni.stopPullDownRefresh(); //停止当前页面下拉刷新
						this.sticks = data.data.data.sticks;
						this.pictures = data.data.data.pictures;
						if(this.pictures!=""){	//判断pictures是否存在 如果存在isImg为true
							this.isImg=true;
						}
						if(this.pictures!=""&&this.sticks!=""){	//同上
							this.isNull = true;
						}
						console.log(this.sticks);
						console.log(this.pictures);
					}
				})
			},
			//跳转到指定帖子
			mainStick(mID) {
				uni.navigateTo({
					url: '/pages/stick/mainStick?info='+mID,
					success: (data) => {
						console.log("跳转到指定帖子");
					}
				})
			},
			//点赞 (使用奇奇怪怪的方法弄出来的，凑合凑合)
			addLike(mLike,mID) {
				mLike++;
				uni.request({
					url: 'http://localhost/stick/addMLike/'+mLike+"/"+mID,
					method: 'GET',
					success:(result)=>{
						console.log(result);
						if(result.statusCode==200){
							this.getSticks();//直接全部刷新来变化点赞数 2333
						}
					}
				})
			}
		}
	}
</script>

<style>
	.search {
		width: 90%;
		height: 60rpx;
		padding: 10rpx;
		margin: 0 auto;
		margin-top: 20rpx;
		border-radius: 50rpx;
		background-color: #ffffff;
	}
	.search input{
		width: 95%;
		margin: 0 auto;
		margin-top: 7rpx;
	}
	.content {
		width: 100%;
		min-height: 1000rpx;
		padding: 10rpx 0;
		background-color: #f5f5f5;
	}

	.comm {
		width: 95%;
		/* height: 690rpx; */
		min-height: 190rpx;
		border-radius: 20rpx;
		padding: 10rpx 0;
		margin: 15rpx auto;
		background-color: #fff;
	}

	.c-top {
		/* background-color: #ff544e; */
		width: 90%;
		height: 100rpx;
		margin: 15rpx auto;
	}

	.c-top image {
		vertical-align: middle;
		margin-right: 15rpx;
	}

	.c-top text {
		font-weight: bold;
	}

	.c-center {
		/* background-color: #ffc54f; */
		width: 90%;
		/* height: 450rpx; */
		margin: 10rpx auto;
		display: flex;
		flex-direction: column;
	}

	.c-center .text_box .mtitle{
		line-height: 60rpx;
		font-size: 35rpx;
		margin-left: 5rpx;
		white-space: nowrap;
		/* 文本强制不换行； */
		text-overflow: ellipsis;
		/* 文本溢出显示省略号； */
		overflow: hidden;
		/* 溢出的部分隐藏 */
	}

	.c-center image {
		width: 100%;
		margin-top: 10rpx;
		border-radius: 20rpx;
	}

	.c-botton {
		/* background-color: #abff73; */
		width: 90%;
		height: 80rpx;
		margin: 0rpx auto;
		margin-top: 30rpx;
		justify-content: space-between;
	}

	.c-botton view {
		width: 25%;
		height: 80rpx;
		text-align: center;
	}

	.c-botton image {
		width: 60rpx;
		height: 60rpx;
		text-align: center;
		vertical-align: middle;
	}

	.c-botton text {
		font-size: 33rpx;
	}

	.flex {
		display: flex;
	}

	.grow1 {
		flex-grow: 1;
	}

	.grow2 {
		flex-grow: 2;
	}

	.grow3 {
		flex-grow: 3;
	}
</style>